// 1. 导入vue核心包
import Vue from 'vue';

//2. 导入App.vue的vue对象
import App from './App.vue';

//3. 将vue-route集成到这个项目
import VueRouter from 'vue-router';
//3.0.1
Vue.use(VueRouter);

// 4.0 注册mit-ui
import Mint from 'mint-ui';
// 导入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//全局使用
Vue.use(Mint);


//5. 注册mui的css样式
import '../static/mui/css/mui.css';


//6.0 导入一个当前系统的全局基本样式
import '../static/css/site.css';


//7. 将vue-resource在vue中绑定，自动在vue对象实例上注入一个$http对象就可以使用了
import vueResource from 'vue-resource';
Vue.use(vueResource);


//8. 定义一个全局过滤器实现日期格式化
import moment from 'moment';
Vue.filter('datefmt', function (input, fmtstring)  {
    return moment(input).format(fmtstring);
})


//9.0 使用vue-preview实现图片预览
import VuePreview from 'vue-preview'


// defalut install
// Vue.use(VuePreview)
Vue.use(VuePreview, {
    mainClass: 'pswp--minimal--dark',
    // barsSize: {top: 0, bottom: 0},
    // captionEl: false,
    // fullscreenEl: false,
    // // shareEl: false,
    // bgOpacity: 0.85,
    // tapToClose: true,
    // tapToToggleControls: false,
    shareButtons: [
        {id:'facebook', label:'分享到facebook 哈哈哈', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
        {id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
        {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
        {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
    ]

})


//3.0.2 导入路由规则对应组件的对象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';
import goodsinfo from './components/goods/goodsinfo.vue';
import gooddesc from './components/goods/gooddesc.vue';
import goodcomment from './components/goods/goodcomment.vue';

//3.0.3定义路由规则
var router1 = new VueRouter({
    linkActiveClass: 'mui-active', //改变路由激活时的class名称
    routes: [
        { path: '/', redirect: '/home' }, //设置当服务器启动时默认进入home
        { path: '/home', component: home }, //首页
        { path: '/shopcar/car', component: shopcar }, //购物车
        { path: '/news/newslist', component: newslist }, //新闻列表
        { path: '/news/newsinfo/:id', component: newsinfo}, //新闻详情
        { path: '/photo/photolist', component: photolist}, //新闻详情
        { path: '/photo/photoinfo/:id', component: photoinfo}, //新闻详情
        { path: '/goods/goodslist', component: goodslist}, //新闻详情
        { path: '/goods/goodsinfo/:id', component: goodsinfo}, //商品信息
        { path: '/goods/gooddesc/:id', component: gooddesc}, //商品详情
        { path: '/goods/goodcomment/:id', component: goodcomment} //商品详情
    ]
});

//3. 利用Vue对象进行解析渲染
new Vue({
    //使用路由对象实例
    router: router1,
    // render: function(create) { create(App); } //es5写法
    render: c => c(App) //es6的函数写法 =>: goes to 语法

}).$mount('#app');